<template>
  <div class="box">
    <div class="left">
      <div class="title overstriking">个人中心</div>
      <div class="main">
        <img src="../../assets/img/R-C.png" alt="" />
        <p class="overstriking">{{ user }}</p>
        <p>{{form.position}}</p>
      </div>
      <p class="describe"><span class="overstriking">个人描述:{{form.describe}}</span></p>
    </div>
    <div class="right">
      <div class="title overstriking color">账户信息</div>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="归属医院">
          <el-select v-model="form.hospital" placeholder="请选择归属医院">
            <el-option label="木一医院" value="shanghai"></el-option>
            <el-option label="弘泰宠物医院医院" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.sex" placeholder="性别">
            <el-option label="男" value="♂"></el-option>
            <el-option label="女" value="♀"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位">
          <el-select v-model="form.position" placeholder="请选择职位">
            <el-option label="医生" value="医生"></el-option>
            <el-option label="护士" value="护士"></el-option>
            <el-option label="院长" value="院长"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="个人描述">
          <el-input v-model="form.describe"></el-input>
        </el-form-item>
        <el-form-item>
          <router-link to="/home/1">
                    <el-button type="primary" @click="onSubmit">修改</el-button>
          </router-link>
          <router-link to="/home/1">
                      <el-button >返回</el-button>
          </router-link>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      form: {
        phone: "",
        email: "asd",
        hospital: "",
        sex: "",
        position: "",
        describe: "",
        userPasage: "",
        id:'',
      },
    };
  },
  computed: {
    user(): any {
      return (this as any).$store.state.user.username;
    },
  },

  mounted() {
    (this as any).form.userPasage = JSON.parse(
      localStorage.getItem((this as any).$store.state.user.username) as any
    );

    console.log((this as any).form.userPasage);
    (this as any).form.phone = (this as any).form.userPasage.phone;
    (this as any).form.email = (this as any).form.userPasage.email;
    (this as any).form.hospital = (this as any).form.userPasage.hospital;
    (this as any).form.describe = (this as any).form.userPasage.describe;
    (this as any).form.sex = (this as any).form.userPasage.sex;
    (this as any).form.position = (this as any).form.userPasage.position;
    (this as any).form.id = (this as any).form.userPasage.id;
  },
  methods: {
   
    onSubmit() :any{
      localStorage.setItem((this as any).$store.state.user.username,JSON.stringify((this as any).form))
      alert("修改成功");
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-form-item__label {
  font-weight: 600;
}
/deep/.el-button--primary{
  margin-right: 10px;
}
.overstriking {
  font-weight: 600;
}
.color {
  color: #48a2ff;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 16px;
  .left {
    flex: 1;
    margin-right: 15px;
    background: white;
    padding: 10px;
    .main {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: auto;
      text-align: center;
      img {
        width: 244px;
        height: 244px;
        border-radius: 50%;
        margin-bottom: 30px;
      }
      p {
        text-align: center;
      }
    }
  }
  .right {
    padding: 10px;
    flex: 1;
    background: white;
  }
  .title {
    height: 72px;
    line-height: 72px;
    border-bottom: 2px solid #e8ece7;
    margin-bottom: 30px;
  }
}
</style>
